<template>
  <div id="app">
    <Moudel1 @add="handleAdd" />
    <Moudel2 :oldGoodsList="oldGoodsList" @search="handelSearch" />
    <Moudel :target="target" :goodsList="goodsList" @del="handleDel" />
  </div>
</template>


<script>
//需求：
//1 根据数据动态的把表格渲染出来
//2 在输入框中输入产品信息 可以动态的添加表格中并进行展示
//3 点击表格中删除按钮可以吧当前的产品信息进行删除
//4 点击数量中的加减按钮 数量要发生变化
//5 点击全选的时候 表格中的商品全部需要被选中 取消的时候所有表格中的数据取消选择
//6 点击勾选表格中的数据 当数据全部被勾选上之后 全选按钮也要被勾选上
//7 勾选商品的时候 要进行总价格的计算
//8 数据的永久储存
//9 简单实现搜索
import Moudel from "./Moudel.vue";
import Moudel1 from "./Moudel1.vue";
import Moudel2 from "./Moudel2.vue";

export default {
  data() {
    return {
      goodsList: [
        {
          id: 1,
          title: "酒剑仙",
          quantity: 30,
          pic: "https://img1.baidu.com/it/u=2832432846,891350211&fm=253&fmt=auto&app=138&f=PNG?w=568&h=383",
          price: 5000,
          code: 1,
          // https://img1.baidu.com/it/u=2655816803,2400517744&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=410
        },
        {
          id: 2,
          title: "一刀流",
          quantity: 50,
          pic: "https://img2.baidu.com/it/u=2718162737,2795477597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
          price: 3000,
          code: 2,
        },
        {
          id: 3,
          title: "枪如龙",
          quantity: 40,
          pic: "https://img2.baidu.com/it/u=3763383538,1030751915&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=742",
          price: 3800,
          code: 3,
        },
         {
          id: 4,
          title: "天伤星",
          quantity: 15,
          pic: "https://img1.baidu.com/it/u=137100414,3803336036&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707",
          price: 3200,
          code: 4,
          // https://img1.baidu.com/it/u=2655816803,2400517744&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=410
        },
         {
          id: 5,
          title: "豹子头",
          quantity: 25,
          pic: "https://img1.baidu.com/it/u=2877504548,3874259881&fm=253&fmt=auto&app=138&f=JPG?w=500&h=313",
          price: 2700,
          code: 5,
          // https://img1.baidu.com/it/u=2655816803,2400517744&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=410
        },
         {
          id: 6,
          title: "花和尚",
          quantity: 42,
          pic: "https://img1.baidu.com/it/u=2195914808,1358694396&fm=253&fmt=auto&app=138&f=JPEG?w=420&h=573",
          price: 1800,
          code: 6,
          // https://img1.baidu.com/it/u=2655816803,2400517744&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=410
        },
      ],
      target: {},
      oldGoodsList: [],
    };
  },
  created() {
    //将oldGoodsList中选项 拷贝一分歌女oldGoodsList
    this.oldGoodsList = [...this.goodsList];
  },

  components: {
    Moudel,
    Moudel1,
    Moudel2,
  },
  methods: {
    //处理搜索
    handelSearch(input) {
      this.goodsList = input;
    },

    handleAdd(input) {
      console.log(input);
      this.goodsList.push(input);
    },
    handleDel(input) {
      //删除goodsList的时候  获取当前被删除商品的id 然后到checkArr这个数组中 找到id对应的数据  将这个数据从checkArr中删除掉
      let target = this.goodsList.splice(input, 1);
      //使用vue.$set将这个target变成响应式数据

      //在组件中使用$set的时候 选项中data的属性 需要预先声明
      this.$set(this, "target", target[0]);
    },
  },
};
</script>

<style>
body {
  position: relative;
  /* background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.2qqtouxiang.com%2Fpic%2FBZ7863_07.jpg&refer=http%3A%2F%2Fimg.2qqtouxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660295205&t=f11ae23b18698247b9035efd8818e066"); */
}
#app {
  width: 600px;
  margin: 10px auto;
  /* border: 5px solid darkorchid; */
  background: #fff;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #c84ed5;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
  color: rgb(75, 101, 220);
}
#ts {
  color: red;
}
/* #img{
            width: 350px;
            height: 410px;
            position: absolute;
            right: 20px;
            opacity:0.8;            

        }
        #img1{
            width: 350px;
            height: 410px;
            position: absolute;
            left: 20px;
            opacity:0.8;            
        } */
#img {
  height: 50px;
  width: 50px;
}
</style>
